<!--代理商-->
<template>
  <page-header-wrapper
    :title="false">
    <SerchBar></SerchBar>
    <a-card :loading="loading" :bordered="false">
      <div class="table_header" style="display: flex;justify-content: space-between;padding-right: 20px ">
        <div>
          <a-button type="primary" icon="plus" @click="addUser">
            新建
          </a-button>
          <a-button icon="vertical-align-bottom" style="margin-left: 10px">
            导入
          </a-button>
          <a-button icon="vertical-align-top" :disabled="isOpenExport" style="margin-left: 10px">
            导出
          </a-button>
          <a-button icon="disconnect" :disabled="isOpenExport" style="margin-left: 10px">
            暂停用户
          </a-button>
          <a-button icon="link" :disabled="isOpenExport" style="margin-left: 10px">
            激活用户
          </a-button>
        </div>
        <div class="headInput">
          <a-select class="serchInput" :default-value="serchList[0].dataIndex">
            <a-select-option style="" :value="item.dataIndex" v-for="(item ,index ) in serchList" :key="index">
              {{ item.title }}
            </a-select-option>
          </a-select>
          <a-select
            show-search
            :value="value"
            placeholder="input search text"
            style="width: 200px;border-radius: 0px "
            :default-active-first-option="false"
            :show-arrow="false"
            :filter-option="false"
            :not-found-content="null"
            @search="handleSearch"
            @change="handleChange"
          >
            <a-select-option style="border-radius: 0px " v-for="d in columns" :key="d.title">
              {{ d.title }}
            </a-select-option>
          </a-select>
          <a-button icon="search" type="primary">
            查找
          </a-button>

          <a-popover trigger="click" placement="left">
            <template slot="title">
              自定义显示列表
            </template>
            <template slot="content">
              <a-checkbox-group class="checkGroup" :options="checkColums" v-model="hasCheckColums" @change="onChage">  </a-checkbox-group>
            </template>
            <a-button class="popuerButton" icon="ordered-list" type="primary">
              列表
            </a-button>
          </a-popover>
        </div>

      </div>

      <a-table style="margin-top: 10px" :columns="columns" :pagination="pagination" :data-source="data" :row-selection="rowSelection">
        <template slot="name" slot-scope="text , record">
          <span @click="openDialogName(record)">
            {{ text }}
          </span>
        </template>
        <template slot="priceList" slot-scope="price">
          <span>
            <a-tag v-for="(item,index) in price" :key="index" color="blue">{{ item.title }}-{{ item.price }}</a-tag>
          </span>
        </template>
        <template slot="status" slot-scope="text">
          <span >
            <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
          </span>
        </template>
        <template slot="action">
          <a-button type=" primary">
            操作
          </a-button>
        </template>
        <template slot="buildOptionText" slot-scope="props">
          <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
          <span v-if="props.value === '50'">全部</span>
        </template>
      </a-table>
    </a-card>

    <add-user
      ref="createModal"
      :visible="visible"
      :loading="confirmLoading"
      :model="showType"
      :user-data="userData"
      @close="handleCancel"
      @submit="handleOk"
    />
  </page-header-wrapper>

</template>

<script>
import { SerchBar } from '@/components'
import addUser from '@/views/users/componets/components/addUser'
import { data } from './data/table'
const columns = [
  { title: '名称', width: 180, dataIndex: 'name', key: 'name', fixed: 'left', scopedSlots: { customRender: 'name' } },
  { title: 'phone', dataIndex: 'phone', key: 'age', fixed: 'left' },
  { title: '计费模式', dataIndex: 'payType', key: '1' },
  { title: '余额', dataIndex: 'money', key: '2' },
  { title: '状态', dataIndex: 'status', key: '6', scopedSlots: { customRender: 'status' } },
  { title: '价格', dataIndex: 'price', key: '3', scopedSlots: { customRender: 'priceList' } },
  { title: '开户时间', dataIndex: 'create_time', key: '4' },
  { title: '备注', dataIndex: 'remarks', key: '5' },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'operation',
    fixed: 'right',
    width: 100,
    scopedSlots: { customRender: 'action' }
  }
]

const statusMap = {
  0: {
    status: 'default',
    text: '关闭'
  },
  1: {
    status: 'success',
    text: '正常'
  },
  2: {
    status: 'success',
    text: '已上线'
  },
  3: {
    status: 'error',
    text: '异常'
  }
}
const serchList = [
  {
    title: '名称',
    dataIndex: 'name'
  },
  {
    title: '手机',
    dataIndex: 'phone'
  },
  {
    title: '上级',
    dataIndex: 'p_name'
  }, {
    title: '套餐类型',
    dataIndex: 'type'
  }
]
export default {
  name: 'Agent',
  data () {
    return {
      loading: true,
      data,
      columns,
      hasCheckColums: [], // 标示已经选中的
      checkColums: [], // 初始化的check
      selectedRowKeys: [],
      isOpenExport: true,
      serchList,
      value: '',
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      current: 1,
      pagination: {
        defaultPageSize: 10,
        total: 50,
        'show-size-changer': true
      },
      showType: 0,
      userData: {},
      visible: false,
      confirmLoading: false
    }
  },
  components: {
    SerchBar,
    addUser
  },
  created () {
    this.checkGroupInit()
    // 模拟2秒后关闭骨架屏
    setTimeout(() => {
      this.loading = false
    }, 500)
  },
  filters: {
    statusFilter (type) {
      return statusMap[type].text
    },
    statusTypeFilter (type) {
      return statusMap[type].status
    }
  },
  computed: {
    rowSelection: function () {
      const t = this
      return {
        onChange: function (selectedRowKeys, selectedRows) {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
          if (selectedRowKeys.length > 0) {
            t.isOpenExport = false
          } else {
            t.isOpenExport = true
          }
        }
      }
    }
  },
  methods: {
    checkGroupInit () {
      const columns = this.columns
      const checkColums = []
      const hasCheckColums = []
      columns.map(item => {
        const columsItem = {}
        const hasCheckColumsitem = String(item.dataIndex)
        if (item.title === '操作') {
          columsItem.disabled = true
        }
        columsItem.label = item.title
        columsItem.value = String(item.dataIndex)
        checkColums.push(columsItem)
        hasCheckColums.push(hasCheckColumsitem)
      })
      this.hasCheckColums = hasCheckColums
      this.checkColums = checkColums
    },
    onChage (e) {
      if (e.length !== 0) {
        const columnsArray = []
        for (var i in e) {
          columns.map(item => {
            if (e[i] === item.dataIndex) {
              columnsArray.push(item)
            }
          })
        }
        this.columns = columnsArray
      } else {

      }
    },
    handleSearch (value) {
      console.log(value)
    },
    handleChange (value) {
      console.log('123456' + value)
    },
    openDialogName (e) {
      this.visible = true
      this.showType = 1
      this.userData = e
    },
    addUser () {
      this.visible = true
      this.showType = 0
    },
    handleCancel () {
      this.visible = false
      this.showType = 0
    },
    handleOk () {
      this.confirmLoading = true
      setTimeout(() => {
        this.visible = false
        this.showType = 0
      }, 500)
    }
  }
}
</script>

<style lang='less' scoped>
.table_header{
  button{
    border-radius: 5px;
  }
  .popuerButton{
    margin-left: 20px;
  }
}
.checkGroup{
  width: 120px;
  margin: 10px;
  line-height: 25px
}

</style>
